<template>
  <common-page>
    <view class="login-wrapper">
      <image class="bg" src="@/static/login/image-login12.png"></image>
      <view class="header">
        <view> 欢迎使用 </view>
        <!--<view class="header-title"> 共享出行，绿色环保 </view>-->
      </view>
      <view class="content">
        <u-button type="primary" size="large" text="手机号快捷登录" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber"></u-button>

      </view>
    </view>
  </common-page>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {};
	},
	methods: {
		// 手机号快捷登录
		handleGetPhoneNumber(event) {
			console.log('event', event);
			if (event.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.$emit('toast', '获取手机号失败');
			}
			// details 需要发送给后端
		}
	}
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  object-fit: cover;
}
.content {
  width: 85%;
  margin-top: auto;
  margin-bottom: 45%;
  z-index: 11;
  text-align: center;
  font-size: 30rpx;
  color: rgba(0, 0, 0, 1);
}
.header {
  width: 85%;
  margin-top: 60rpx;
  font-size: 45rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  z-index: 11;
}
.header-title {
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.7);
  margin-top: 20rpx;
  font-weight: bold;
}

.handle {
  background-color: #5BE286;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 35rpx;
  padding: 20rpx 30rpx;
  margin-bottom: 40rpx;
}
</style>
